<template>
    <div class="pagination-button-group">
        <el-button-group>
            <el-button @click="toFirstPage">首页</el-button>
            <el-button icon="el-icon-arrow-left" @click="toLastPage">上一页</el-button>
            <el-button>第{{currentPage}}页</el-button>
            <el-button @click="toNextPage">
                下一页
                <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
            <el-button @click="toEndPage">末页</el-button>
            <el-button>共{{ totalPages }}页</el-button>
            <el-button>总条数：{{ totalNum }}</el-button>
        </el-button-group>

        <!-- <el-autocomplete v-model="perPage" :fetch-suggestions="querySuggestion"  class="page-jump"></el-autocomplete>
        <span>条/页</span> -->

        <el-input type="number" v-model="targetPage" class="page-jump"></el-input>
        <el-button type="primary" @click="toTargetPage">跳转</el-button>
    </div>
</template>

<script>
export default {
    name: 'custom-pagination',
    props: [
        'totalPages',
        'currentPage',
        'totalNum',
        'defaultPageSize',
        'perPageSuggestion'
    ],
    data () {
        return {
            targetPage: 1,
            perPage: this.defaultPageSize ? this.defaultPageSize.toString() : '8'
        };
    },
    watch: {
        perPage (newVal) {
            if (newVal || newVal === '0') {
                let perPage = parseInt(newVal);
                if (perPage !== perPage || perPage < 1) {
                    this.$message.warning('输入的值无效，已置为默认值！');
                    this.perPage = this.defaultPageSize.toString() || '8';
                    this.$emit('perPageChange', Number(this.perPage));
                    throw new Error('invalid perPage input:' + perPage);
                }
                this.$emit('perPageChange', perPage);
            }
        }
    },
    methods: {
        toFirstPage () {
            this.$emit('toFirstPage');
        },
        toLastPage () {
            this.$emit('toLastPage');
        },
        toNextPage () {
            this.$emit('toNextPage');
        },
        toEndPage () {
            this.$emit('toEndPage');
        },
        toTargetPage () {
            this.$emit('toTargetPage', this.targetPage);
        },
        querySuggestion (queryString, cb) {
            cb(
                this.perPageSuggestion.map(item => {
                    let num = Math.floor(Number(item));
                    if (num !== num || num < 1) {
                        throw new Error('invalid perPage input:' + item);
                    }
                    return { value: num.toString() };
                })
            );
        }
    }
};
</script>

<style>
.el-autocomplete-suggestion li {
    padding: 0 10px !important;
    text-align: center;
}
</style>
<style lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.pagination-button-group {
    margin-top: 30px;
    text-align: center;

    .page-jump {
        width: 50px;
        margin-left: 30px;
        margin-right: 3px;
    }
}
</style>